<template>
  <div class="home">
    <van-nav-bar :left-text="city" @click-left="Clickcity">
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <div id="allmap"></div>
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList" :key="item.id">
          <img :src="item.image_url" alt="">
        </van-swipe-item>
    </van-swipe>
    <!-- 中间标签栏 -->
      <div class="homecenter">
        <div class="homecenter-l" @click="gocategoryList(item.id)" v-for="item in channelList" :key="item.id">
            <img :src="item.icon_url" alt="">
            <p>{{item.name}}</p>
        </div>
      </div>
      <div class="homebrand">
        <div class="brand-head" @click="gobrandList">品牌制造商直供</div>
        <div class="brand-center">
            <div @click="gobrand(item.id)" class="brand-center-s" v-for="item in brandList" :key="item.id">
              <p class="brand-center-s-t">{{item.name}}</p>
              <p class="brand-center-s-b">{{item.floor_price}}元起</p>
              <img :src="item.new_pic_url" alt="">
            </div>
        </div>
      </div>
      <!-- 新品首发 -->
      <div class="homenewGoods">
        <div class="newGoods-head" @click="goGoods">
          <div class="newGoods-head-c">
            <p>新品首发</p>
            <div class="newGoods-head-c-c">查看全部</div>
          </div>
        </div>
        <div class="newGoods-list">
          <ul>
            <li v-for="item in newGoodsList" :key="item.id" @click="detailactionsitem(item.id)">
              <img :src="item.list_pic_url" alt="">
              <p class="newGoods-list-t">{{item.name}}</p>
              <p class="newGoods-list-c">{{item.goods_brief}}</p>
              <p class="newGoods-list-b">￥{{item.retail_price}}</p>
            </li>
          </ul>
        </div> 
    </div>
      <!-- 人气推荐 -->
    <div class="homehotGoods">
      <div class="hotGoods-head" @click="goGoodss">
          <div class="hotGoods-head-c">
            <p>人气推荐.好物精选</p>
            <div class="hotGoods-head-c-c">查看全部</div>
          </div>
      </div>
      <div class="hotGoods-list">
        <ul>
        <li v-for="item in hotGoodsList" :key="item.id" @click="detailactionsitem(item.id)">
          <img :src="item.list_pic_url" alt="">
          <p class="hotGoods-list-t">{{item.name}}</p>
          <p class="hotGoods-list-c">{{item.goods_brief}}</p>
          <p class="hotGoods-list-b">￥{{item.retail_price}}</p>
        </li>
      </ul>
      </div>
      
    </div>
    <!-- 专题精选 -->
     <div class="hometopic">
      <div class="hometopic-head">专题精选 <van-icon name="share-o" /> </div>
      <div class="hometopic-list" @click="gotopic">
        <ul>
          <li v-for="item in topicList" :key="item.id">
            <img :src="item.scene_pic_url" alt="">
            <p class="hometopic-list-t">{{item.title}}</p>
            <p class="hometopic-list-c">{{item.price_info}}元起</p>
            <p class="hometopic-list-b">{{item.subtitle}}</p>
          </li>
        </ul>
      </div>
      
    </div>
    <div class="newcategory">
      <div class="newcategory-list" v-for="item in newcategoryList" :key="item.id">
          <div class="newcategory-head">{{item.name}}好物</div>
          <div class="newcategory-list-list" v-for="item in item.goodsList" :key="item.id" @click="detailactionsitem(item.id)">
              <img :src="item.list_pic_url" alt="">
              <p class="newcategory-t">{{item.name}}</p>
              <p class="newcategory-c">￥{{item.retail_price}}</p>
          </div>
          <div class="newcategory-list-list" @click="gocategorylistItem(item.id)">
              <p class="newcategory-b">{{item.name}}好物</p>
              <p class="newcategory-inco"><van-icon name="setting-o" /></p>
          </div>
      </div>
    </div>
    <div class="p"></div>
    <!-- 页脚 -->
    <van-tabbar route>
      <!-- replace 跳转是否替换当前页面 -->
      <!-- to 跳转路由 -->
      <van-tabbar-item replace to="/home" icon="wap-home-o"
        >首页</van-tabbar-item
      >
      <van-tabbar-item replace to="/topic" icon="description"
        >专题</van-tabbar-item
      >
      <van-tabbar-item replace to="/category" icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item replace to="/cart" icon="shopping-cart-o"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item replace to="/my" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import {hom} from "@/api/home/home.js"
export default {
  data() {
    return {
      // 地图名字
      city: "",
      //banner 数据
      bannerList:[],
      //中间标签页
      channelList:[],
      //品牌制造商直供
      brandList:[],
      // 新品首发
      newGoodsList:[],
      // 人气推荐
      hotGoodsList:[],
      // 专题精选
      topicList:[],
      // 居家好物
      newcategoryList:[],
    };
  },
  methods: {
    //跳转到city页面
    Clickcity() {
      this.$router.push({ name: "main" });
    },
    //首页数据
    getHome(){
      hom().then(res=>{
        // console.log(res)
        this.bannerList=res.banner;
        this.channelList=res.channel;
        console.log(this.channelList)
        this.brandList=res.brandList;
        this.newGoodsList=res.newGoods;
        // console.log(this.newGoodsList)
        this.hotGoodsList=res.hotGoods;
        // console.log(this.hotGoodsList)
        this.topicList=res.topicList;   
        this.newcategoryList=res.newCategoryList;
      
      })
    },
    // 居中状态栏跳转
    onChangehome(){
      },
      gobrand(key){
        // console.log(index)
        // var brandId=this.brandList[index].id
        // console.log(brandId)
        var Id=key
        // localStorage.setItem('brandId',brandId)
        localStorage.setItem('Id',Id)

        // console.log(id)
        this.$router.push({name:'brand'})
      },
      goGoods(){
        var isNew=1;
        localStorage.setItem('isNew',isNew);
        this.$router.push({name:'goods'})
      },
      //人气推荐,好物精选
      goGoodss(){
        var isHot=1;
        localStorage.setItem('isHot',isHot);
        this.$router.push({name:'goods'})
      },
      gotopic(){
        this.$router.push({name:'detailaction'})
      },
      //跳转到商品列表页面
      gocategoryList(key){
        console.log(key)
        var keyId=key;
        // var Id=key;
        localStorage.setItem('keyId',keyId)
        // localStorage.setItem('Id',Id)

        this.$router.push({name:'categorylist'})
      },
      gocategorylistItem(key){
        console.log(key)
        var keyId=key;
        // var Id=key;
        localStorage.setItem('keyId',keyId)
        this.$router.push({name:'categorylist'})
      },
      //获取商品详情信息
      detailactionsitem(key){
        console.log(key)
        var detailactionsId=key;
        var Id=key;
        localStorage.setItem('Id',Id)
        // localStorage.setItem('detailactionsId',detailactionsId)
        this.$router.push({name:'detailactions'})
      },
      //跳转页面
      gobrandList(){
        this.$router.push({name:'brandList'})
      }
  },
  created(){
    //执行
    this.getHome()
  },
  // 插件初始化
  mounted() {
    var _this = this;
    //浏览器定位
    var map = new BMap.Map("allmap");
   map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(
      function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          // console.log(r);
          _this.city = r.address.city;
          // var mk = new BMap.Marker(r.point);
          // map.addOverlay(mk);
          // map.panTo(r.point);
          // alert("您的位置：" + r.point.lng + "," + r.point.lat);
        } else {
          alert("failed" + this.getStatus());
        }
      },
      { enableHighAccuracy: true }
    );
  },
};
</script>
<style lang="scss" scoped>
.home{
  background-color: #F4F4F4;
  .van-swipe{
    .van-swipe-item{
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .homecenter{
    width: 100%;
    height:70px;
    padding: 5px 0;
    background-color: #fff;
    .homecenter-l{
      float: left;
      width: 20%;
      height: 100%; 
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      p{
        float: left;
        width: 100%;
        text-align: center;
      }
      img{
        width:29px;
        height: 29px;
      
      }
    }
  }
  .homebrand{
    width: 100%;
    height: 300px;
    margin-top: 15px;
    background-color: #fff;
    .brand-head{
      width: 100%;
      height:65px;
      line-height:65px;
      text-align: center;
    }
    .brand-center{
      width:95%;
      height: 100%;
      margin: 0 auto;
      .brand-center-s{
        position: relative;
        float: left;
        width:48%;
        margin-top:5px ;
        .brand-center-s-t{
          position:absolute;
          top:0;
          left:20px;
        }
        .brand-center-s-b{
          position:absolute;
          top:20px;
          left:20px;
        }
        img{
          width: 100%;
          height: 100%;
        }
      }
      .brand-center-s:nth-child(2n){
        margin-left:10px;
      }
    }
  }
  .homenewGoods{
     display: flex;
      flex-direction: column;
    width:100%;
    height:380px;
    .newGoods-head{
      position: relative;
      margin-top:10px;
      width: 100%;
      height: 130px;
      background-color: #EEF5FC;
      .newGoods-head-c{
        width: 30%;
        height: 50%;
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
        // background-color: #fff;
        p{
          text-align: center;
          color: #8C9BAE;
          font-size: 16px;
        }
        .newGoods-head-c-c{
          width: 100%;
          height: 25px;
          color: #8C9BAE;
          text-align: center;
          line-height: 25px;
          background-color: #D8E4F0;
        }
      }
    }
    .newGoods-list{
      overflow: auto;
      width: 100%;
      height:250px;
      margin-top: 10px;     
      ul{
        // width:565px;
        display: flex;
        justify-content:space-between;
        li{
        padding: 0 9px;
        height: 100%;
        width:120px;
        background-color: #fff;
        margin-right: 5px;
        img{
          width:100%;
          height:auto ;
        }
        .newGoods-list-t{
          font-weight:bolder;
          font-size: 16px;
          // 超出用省略号
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .newGoods-list-c{
          color: #8a8a8a;
          // 超出用省略号
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .newGoods-list-b{
          color: #9c3232;
        }
      }
      }
      
    }
  }
  .homehotGoods{
    display: flex;
    flex-direction: column;
    width:100%;
    height:390px;
  .hotGoods-head{
      position: relative;
      margin-top:10px;
      width: 100%;
      height: 130px;
      background-color:#FEF7E3;
    .hotGoods-head-c{
        width: 40%;
        height:60%;
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
        // background-color: #fff;
      p{
          text-align: center;
          color: #b1a279;
          font-size: 16px;
        }
      .hotGoods-head-c-c{
          width: 100%;
          height: 25px;
          color:#b1a279 ;
         
          text-align: center;
          line-height: 25px;
          background-color: #f4e9cb;
        }
      }
    }
    .hotGoods-list{
      overflow: auto;
      width: 100%;
      height:250px;
      margin-top: 10px;
      
      ul{
        // width:565px;
        display: flex;
        justify-content:space-between;
        li{
        padding: 0 9px;
        height: 100%;
        width:120px;
        background-color: #fff;
        margin-right: 5px;
        img{
          width:100%;
          height:auto ;
        }
        .hotGoods-list-t{
          font-weight:bolder;
          font-size: 16px;
          // 超出用省略号
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .hotGoods-list-c{
          color: #8a8a8a;
          // 超出用省略号
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .hotGoods-list-b{
          color: #9c3232;
        }
      }
      }
      
    }
  }
  .hometopic{
    width: 100%;
    height: 305px;
    background-color: #fff;
    .hometopic-head{
      text-align: center;
      height: 50px;
      line-height: 50px;
      margin-top: 10px;   
    }
    .hometopic-list{
      overflow: auto;
      width: 100%;
      height:250px;
      ul{
        display: flex;
        justify-content:space-between;
        width: 900px;
      }
      li{
        padding: 0 9px;
        height:250px;
        width:290px;
        background-color: #fff;
        margin-right: 5px;
        img{
          width: 100%;
          height:160px;
        }
        .hometopic-list-t{
          float: left;
          font-weight:bolder;
          font-size: 16px;
        }
        .hometopic-list-c{
          float: right;
          color: #9c3232;
        }
        .hometopic-list-b{
          width: 100%;
          // 超出用省略号
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

    }
  }
  .newcategory{
    width: 100%;
    .newcategory-list{
      width: 100%;
      // height: 820px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .newcategory-head{
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        margin-top:10px
      }
      .newcategory-list-list{
        width: 42%;
        height: 190px;
        background-color: #fff;
        margin-top:10px;
        padding:0 10px;
        img{
          display: block;
          width:75%;
          height: auto;
          margin: 0 auto;
        }
        .newcategory-t{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 98%;
        }
        .newcategory-c{ 
          color: #9c3232;
        }
        .newcategory-b{
          font-size: 16px;
          line-height:30px;
          margin-top:30px;
          text-align: center;
        }
        .newcategory-inco{
          font-size: 30px;
          text-align: center;
        }
      }
    }
  }
  .p{
    height:50px;
    background-color: #F4F4F4;
  }
}
  
</style>
